new Vue({
    el: '#box',
    data: {
        room: {},
        showMembers: false,
        memberListOffset: "270px",
        content: "",

        memberList: [],
        memberMap: [],

        groupMsgList: [],
        roomId: -1,
        amIBan: false,
        isMyAdmin: true,
    },
    computed: {
        normalMsgList: function () {
            return this.groupMsgList.filter((msg) => {
                return msg.type == Room.MsgType.NORMAL;
            })
        }
    },
    methods: {
        open: function () {
            this.showMembers = true;
            var thiz = this;
            setTimeout(function () {
                thiz.memberListOffset = "0px";
            }, 200)
        },
        close: function () {
            this.memberListOffset = "270px";
            var thiz = this;
            setTimeout(function () {
                thiz.showMembers = false;
            }, 200)
        },
        clickUser: function (uid) {
            if (uid == this.my.id) {
                this.modifyMyName();
                return;
            }
            if (this.my.isAdmin) {
                this.setBan(uid);
            }
        },
        modifyMyName() {
            var inputEle;
            var banChar = ["【", "】", "[", "]"];
            layer.open({
                title: [
                    '修改昵称',
                    'background-color:#8DCE16; color:#fff;'
                ]
                , anim: 'up'
                , content: `<input class="modify-name" type=text value="${this.my.userName}"/>`
                , btn: ['确认', '取消']
                , success: function (ele) {
                    inputEle = ele.querySelector(".modify-name");
                }
                , yes: (index) => {
                    layer.close(index);
                    var newName = inputEle.value;
                    if (newName.length == 0) {
                        this.showToast("不能为空");
                        return;
                    }
                    for (var i = 0; i < banChar.length; i++) {
                        if (newName.indexOf(banChar[i]) !== -1) {
                            this.showToast("存在非法字符:" + banChar[i]);
                            return;
                        }
                    }
                    if (newName == this.my.userName) {
                        return;
                    }
                    this.room.updateName(newName);
                }
            });
        },
        showToast(msg) {
            layer.open({
                content: msg
                , skin: 'msg'
                , time: 2
            });
        },
        setBan(uid) {
            var user = this.memberMap[uid];
            var set, trigger;
            if (user.banNum != 0) {
                set = "解除";
                trigger = 0;
            } else {
                set = "设置";
                trigger = this.roomId;
            }
            var dlgMsg = `对用户【${user.userName}】${set}禁言吗?`;
            layer.open({
                content: dlgMsg,
                btn: ['是的', '不是'],
                yes: (index) => {
                    layer.close(index);
                    this.room.ban(uid, trigger)
                }
            });
        },
        sendMsg: function () {
            this.room.sendMsg(this.content);
            this.content = "";
        },
        getUserNameById(id) {
            var user = this.getUserById(id);
            var name = user.userName + (id == this.my.id ? "[我]" : "");
            return name + (user.isAdmin ? "[管理员]" : "");
        },
        getUserAvatarById(id) {
            return './img/list-avatar/' + this.getUserById(id).avatar + '.png';
        },
        getUserById(id){
            var user = this.memberMap[id];
            if(user){
                return user;
            }
            return {
                userName:"[该用户已离开房间]",
                avatar:"off"
            };
        },
        isMineMsg(id) {
            return this.my.id === id;
        },
        reset() {
            this.room = {};
            this.showMembers = false;
            this.roomId = -1;
            this.memberList = [];
            this.memberMap = [];
            this.groupMsgList = [];
            this.amIBan = false;
        },
        runRoom() {

            Room.tryLogin(this.dao).then((user) => {
                return user;
            }, () => {
                return Room.register(this.dao);
            }).then((user) => {
                this.room = new Room(this);
                this.roomId = user.roomId;
                this.amIBan = user.banNum === user.roomId;
                this.my = user;
                this.isMyAdmin = this.my.isAdmin;
                this.room.polling();
            });
        }
    },
    watch: {
        roomId: function (newRoomId, oldRoomId) {
            if (newRoomId == -1 || oldRoomId == -1 || this.my.isAdmin) {
                return;
            }
            this.room.leave(parseInt(newRoomId), parseInt(oldRoomId), () => {
                this.reset();
                this.runRoom();
            })
        }
    },
    created: function () {
        this.dao = new Dao();
        this.runRoom();
    }
});